<div class="home_box">
  <div class="header">
    <div class="logo">
      <img src="@/assets/gp.png" alt="">
    </div>
    <div class="title">
      啥都有 OA
    </div>
    <el-button class="logout" type="info">退出</el-button>
  </div>
  <div class="home">
    <div class="slide">
      <!--
        不同的用户登录进来以后
        因为不同的身份信息, 所以左侧菜单栏显示的内容不一致
      -->
      <el-menu
        default-active="2"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :unique-opened="true"
        class="el-menu-vertical-demo">
        <!--
          el-submenu 表示一级权限
            需要根据 menuList 来实现
            index 的作用, 每一个菜单的独立表示
        -->
        <el-submenu v-for="item in menuList" :key="item.id" :index="item.id + ''">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ item.authName }}</span>
          </template>
          <!--
            el-menu-item 表示二级权限
              根据 item 的 children 来进行实现
          -->
          <el-menu-item v-for="t in item.children" :key="t.id" :index="t.id + ''">
            <i class="el-icon-location"></i>
            <router-link :to="'/' + t.path" tag="span">{{ t.authName }}</router-link>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="content">
      <!--
        二级路由渲染的位置
      -->
      <router-view></router-view>
    </div>
  </div>
</div>
